<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="blog.html" class="active">博客</a></li>
                    <li><a href="about.html">关于我</a></li>
                    <li><a href="contact.html">联系方式</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="blog-header">
        <div class="container">
            <h2>所有文章</h2>
            <div class="blog-filter">
                <input type="text" id="search-posts" placeholder="搜索文章...">
                <select id="category-filter">
                    <option value="">所有分类</option>
                    <option value="技术">技术</option>
                    <option value="生活">生活</option>
                    <option value="思考">思考</option>
                </select>
            </div>
        </div>
    </section>

    <section class="blog-posts">
        <div class="container">
            <div class="posts-list">
                <article class="post-item">
                    <div class="post-thumbnail">
                        <img src="img/post1.jpg" alt="文章图片">
                    </div>
                    <div class="post-details">
                        <span class="post-category">技术</span>
                        <h3><a href="posts/post1.html">第一篇博客文章</a></h3>
                        <p class="post-date">2023年12月1日</p>
                        <p class="post-excerpt">这是我的第一篇博客文章，主要介绍了我如何建立这个博客网站，以及使用的技术栈。在这篇文章中，我详细讲解了HTML、CSS和JavaScript的基础知识以及如何组合它们创建一个简单而美观的网站。</p>
                        <a href="posts/post1.html" class="read-more">阅读更多</a>
                    </div>
                </article>

                <article class="post-item">
                    <div class="post-thumbnail">
                        <img src="img/post2.jpg" alt="文章图片">
                    </div>
                    <div class="post-details">
                        <span class="post-category">生活</span>
                        <h3><a href="posts/post2.html">第二篇博客文章</a></h3>
                        <p class="post-date">2023年12月15日</p>
                        <p class="post-excerpt">在这篇文章中，我分享了一些关于个人生活和工作平衡的心得体会。现代生活节奏快，压力大，如何在忙碌的工作中找到平衡点，保持身心健康，是每个人都需要面对的问题。</p>
                        <a href="posts/post2.html" class="read-more">阅读更多</a>
                    </div>
                </article>

                <article class="post-item">
                    <div class="post-thumbnail">
                        <img src="img/post3.jpg" alt="文章图片">
                    </div>
                    <div class="post-details">
                        <span class="post-category">思考</span>
                        <h3><a href="posts/post3.html">第三篇博客文章</a></h3>
                        <p class="post-date">2024年1月5日</p>
                        <p class="post-excerpt">这篇文章探讨了关于人工智能发展的一些思考。随着AI技术的快速发展，它将如何影响我们的生活和工作？我们应该如何拥抱这种变化，并利用它来提升自己？</p>
                        <a href="posts/post3.html" class="read-more">阅读更多</a>
                    </div>
                </article>

                <article class="post-item">
                    <div class="post-thumbnail">
                        <img src="img/post4.jpg" alt="文章图片">
                    </div>
                    <div class="post-details">
                        <span class="post-category">技术</span>
                        <h3><a href="posts/post4.html">第四篇博客文章</a></h3>
                        <p class="post-date">2024年1月20日</p>
                        <p class="post-excerpt">在这篇技术文章中，我详细介绍了如何使用CSS Grid和Flexbox创建响应式布局。这两种布局方式各有优势，合理使用可以大大提高网页开发效率和用户体验。</p>
                        <a href="posts/post4.html" class="read-more">阅读更多</a>
                    </div>
                </article>
            </div>

            <div class="pagination">
                <a href="#" class="active">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#" class="next">下一页 &raquo;</a>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 我的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#"><img src="img/github.svg" alt="GitHub"></a>
                <a href="#"><img src="img/twitter.svg" alt="Twitter"></a>
                <a href="#"><img src="img/linkedin.svg" alt="LinkedIn"></a>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html> 